<template>
    <div class="search">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
            <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button @click="IncreaseEmployees()">添加员工</el-button>
        </el-form-item>
    </el-form>
    </div>
    <div class="content">
        <el-table :data="userData" style="width: 100%" empty-text="没有查询到该员工信息">
            <el-table-column prop="name" label="员工姓名" width="220" />
            <el-table-column prop="sex" label="性别" width="220" />
            <el-table-column prop="username" label="账号" width="220" />
            <el-table-column prop="phone" label="手机号" width="220" />
            <el-table-column prop="status" label="状态" width="220" />                 
            <el-table-column fixed="right" label="设置" width="180">
            <template #default="scope" >
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">修改</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="page" v-if="isPages" >
        <el-pagination background layout="prev, pager, next" :total="title"  :current-page="currentPags"
            @current-change="currentChange"
        />
    </div>

    <el-dialog v-model="isShowModifyinformation" :title="elDialogTitle">
        <el-form :model="aItmeUserData">
        <el-form-item label="员工姓名" label-width="140px">
            <el-input v-model="aItmeUserData.name" autocomplete="off"  />
        </el-form-item>
        <el-form-item label="性别" label-width="140px">
            <el-select v-model="aItmeUserData.sex" placeholder="选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="账号" label-width="140px" >
            <el-input v-model="aItmeUserData.username" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="密码" label-width="140px">
            <el-input v-model="aItmeUserData.password" autocomplete="off" />
        </el-form-item> -->
            <el-form-item label="手机号" label-width="140px">
            <el-input v-model="aItmeUserData.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" label-width="140px">
            <el-select v-model="aItmeUserData.status" placeholder="设置状态">
            <el-option label="正常" value="1" />
            <el-option label="禁用" value="0" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancelButton">取消</el-button>
            <el-button type="primary" @click="confirmButton">确认</el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script>
import { ElMessage} from 'element-plus';
import { getEmployeePageInfo, setEmployee, updataEmployee} from '../../api/userAdmin.js';

export default {
    name: 'UseraAdmin',
    created(){
        // 数据初始化
        getEmployeePageInfo({
            name: '',
            page: 1,
            pageSize: 10
        }).then(resolve => {
            if(resolve.code == 1){
                this.userData = this.setUserData( resolve.data.records );
                this.title = resolve.data.pages * 10;
                this.isPages = true;
            }
        })
        
    },
    data(){
        return{
            // 搜索员工信息
            dataForm: {
                key:''
            },
            // 员工数据
            userData: [],
            // 显示弹窗界面。
            isShowModifyinformation: false,
            // 个人员工信息
            aItmeUserData:{},
            formLabelWidth: '140px',
            // 数据总数，用于分页
            title: 10,
            // 是否显示分页
            isPages: false,
            // 弹窗标题
            elDialogTitle: '',
            // 当前页
            currentPags: 1

        }
    },
    methods: {
        //搜索员工信息
        getDataList(){
                getEmployeePageInfo({
                    name: this.dataForm.key,
                    page: 1,
                    pageSize: 10
                }).then(resolve => {
                    if(resolve.code == 1){
                        this.currentPags = 1;
                        this.title = Math.ceil(resolve.data.total / 10) * 10;
                        this.userData = this.setUserData( resolve.data.records );
                    };
                })
        },
        // 员工信息修改
        handleClick(row){
            this.elDialogTitle = '修改员工数据';
            this.aItmeUserData = {
                id: row.id,
                name: row.name,
                sex: row.sex,
                username: row.username,
                password: row.password,
                phone: row.phone,
                create_user: row.create_user,
                create_time: row.create_time,
                status: row.status 
            }
            this.isShowModifyinformation  = true;
        },
        // 新增员工
        IncreaseEmployees(){
             this.isShowModifyinformation = true;  
             this.elDialogTitle = '添加员工';     
        },
        // 分页数据请求。
        currentChange(e){
            getEmployeePageInfo({
                name: this.dataForm.key,
                page: e,
                pageSize: 10
            }).then(resolve => {
                if(resolve.code == 1){
                    this.currentPags = e;
                    this.userData = this.setUserData( resolve.data.records );
                    this.title = Math.ceil( resolve.data.total / 10 ) * 10;
                    this.isPages = true;
                }
            })            
        },
        // 取消修改员工信息
        cancelButton(){
            this.isShowModifyinformation = false;
            this.aItmeUserData = {};
        },
        // 确认按钮
        confirmButton(){
            let name = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/; 
            // 验证真实姓名。
            let phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 手机号验证 

            if(!name.test(this.aItmeUserData.name)){
                if(!this.aItmeUserData.name){
                    ElMessage.error('姓名不能为空');
                    return;
                }
                ElMessage.error('姓名输入错误,请重新输入');
                return;
            }else if(this.aItmeUserData.sex == undefined){
                ElMessage.error('请选择性别');
                return;
            }else if(!phone.test(this.aItmeUserData.username) && this.aItmeUserData.username !== 'admin'){
                if(!this.aItmeUserData.username){
                    ElMessage.error('账号不能为空');
                    return;
                };
                ElMessage.error('账号格式错误')
                return;
            }else if(this.aItmeUserData.status == undefined){
                ElMessage.error('请选择账号状态');
                return;
            }

            
            

            this.isShowModifyinformation = false;
            if(this.elDialogTitle == "修改员工数据"){

                if(this.aItmeUserData.status == "正常"){
                    this.aItmeUserData.status = 1;
                }else if(this.aItmeUserData.status == "禁用"){
                    this.aItmeUserData.status = 0;
                };
                // 修改员工数据
                setEmployee(this.aItmeUserData).then((resolve) => {

                    if(resolve.data = '操作成功'){
                        ElMessage.success('数据修改成功');
                        // 数据修改成功以后，重新加载数据

                        getEmployeePageInfo({
                            name: '',
                            page: this.currentPags,
                            pageSize: 10
                        }).then(resolve => {
                            if(resolve.code == 1){

                                this.userData = this.setUserData( resolve.data.records );
                                this.title = resolve.data.pages * 10;
                                this.isPages = true;
                            }

                        });
                    }
                })
                
            }else if(this.elDialogTitle == "添加员工"){
                const data = this.aItmeUserData;
                data.password = "123456";

                updataEmployee(data).then(resolve => {
                    if(resolve.code == 1 && resolve.data == "新增员工成功"){
                        ElMessage.success('员工添加成功');
                    }
                })            
            }
            this.aItmeUserData = {};
        },
        // 员工信息整理
        setUserData(data){
            return data.map((item) => {
                if(item.status == 1){
                    item.status = "正常";
                }else{
                    item.status = "禁用"
                }

                return item;
            })
        }
    }
}
</script>

<style lang="scss">
    .search{
        width: 100%;
    }

    .content{
        width: 100%;
        padding-bottom: 15px;
        padding-top: 15px;
        background-color: #ffffff;
    }

    .page{
        width: 100%;
        height: 30px;
    }

    .modifyinformation{
        position: absolute;
        top: 0;
        left: 0;
        // float: left;
        width: 600px;
        height: 600px;
        z-index: 100;
    }
</style>

